<template>
  <f7-page>
    <f7-navbar title="按钮" back-link></f7-navbar>

    <div class="tien-bar bg-white border-bottom ">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>按钮形状
      </div>
    </div>
    <div class="padding flex flex-wrap justify-between align-center bg-white">
      <button class="tien-btn">默认</button>
      <button class="tien-btn round">圆角</button>
      <button class="tien-btn icon">
        <span class='tien-icon-emojifill'></span>
      </button>
    </div>
    <div class="tien-bar margin-top bg-white border-bottom">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>按钮尺寸
      </div>
    </div>
    <div class="padding flex flex-wrap justify-between align-center bg-white">
      <button class='tien-btn round sm'>小尺寸</button>
      <button class='tien-btn round'>默认</button>
      <button class='tien-btn round lg'>大尺寸</button>
    </div>
    <div class="tien-bar margin-top bg-white">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>按钮颜色
      </div>
    </div>
    <div class='grid col-5 padding-sm'>
      <div class='margin-tb-sm text-center tien-col' v-for="(item,idx) in ColorList">
        <button :class="'bg-'+item.name" class="tien-btn round  shadow ">{{item.title}}</button>
      </div>
    </div>
    <div class="tien-bar margin-top bg-white">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>镂空按钮
      </div>
    </div>
    <div class='grid col-5 padding-sm bg-white'>
      <div class='margin-tb-sm text-center tien-col' v-for="(item,idx) in ColorList" >
        <button :class="'line-'+item.name " class="tien-btn round ">{{item.title}}</button>
      </div>
    </div>
    <div class="tien-bar margin-top bg-white">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>块状按钮
      </div>
    </div>
    <div class="padding flex flex-direction">
      <button class='tien-btn bg-grey lg'>玄灰</button>
      <button class='tien-btn bg-red margin-tb-sm lg'>嫣红</button>
    </div>
    <div class="tien-bar margin-top bg-white">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>无效状态
      </div>
    </div>
    <div class="padding bg-white">
      <button class='tien-btn block bg-blue margin-tb-sm lg' disabled type=''>无效状态</button>
      <button class='tien-btn block line-blue margin-tb-sm lg ' disabled>无效状态</button>
    </div>
    <div class="tien-bar margin-top bg-white">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>按钮加图标
      </div>
    </div>
    <div class="padding-xl bg-white">
      <button class='tien-btn block line-orange lg'>
        <span class='tien-icon-upload'></span> 图标</button>
      <button class='tien-btn block bg-blue margin-tb-sm lg'>
        <span class='tien-icon-loading2 iconfont-spin'></span> 加载</button>
      
    </div>


  </f7-page>
</template>

<script>
import '../../css/colorui/background.css';
import '../../css/colorui/border.css';
import '../../css/colorui/button.css';
export default {
  name:'button',
  data() {
    return {
      ColorList: [{
        title: '嫣红',
        name: 'red',
        color: '#e54d42'
      },
      {
        title: '桔橙',
        name: 'orange',
        color: '#f37b1d'
      },
      {
        title: '明黄',
        name: 'yellow',
        color: '#fbbd08'
      },
      {
        title: '橄榄',
        name: 'olive',
        color: '#8dc63f'
      },
      {
        title: '森绿',
        name: 'green',
        color: '#39b54a'
      },
      {
        title: '天青',
        name: 'cyan',
        color: '#1cbbb4'
      },
      {
        title: '海蓝',
        name: 'blue',
        color: '#0081ff'
      },
      {
        title: '姹紫',
        name: 'purple',
        color: '#6739b6'
      },
      {
        title: '木槿',
        name: 'mauve',
        color: '#9c26b0'
      },
      {
        title: '桃粉',
        name: 'pink',
        color: '#e03997'
      },
      {
        title: '棕褐',
        name: 'brown',
        color: '#a5673f'
      },
      {
        title: '玄灰',
        name: 'grey',
        color: '#8799a3'
      },
      {
        title: '草灰',
        name: 'gray',
        color: '#aaaaaa'
      },
      {
        title: '墨黑',
        name: 'black',
        color: '#333333'
      },
      {
        title: '雅白',
        name: 'white',
        color: '#ffffff'
      },
    ]
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>

